<template>
  <div :id="target"
       style="min-height:200px;width:100%;height:100%">
    <el-row style="height:173px;">
      <el-col>
        <el-card class="transparent" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)" v-if="this.$store.getters.getUserInfo!=null" style="border:0" >
          <div slot="header">
            <span >账户信息</span>
            <el-button @click="refreshAsset"  style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh ">刷新</el-button>
          </div>
          <el-row >
            <el-col class="p-tb5">
              <router-link to="/home/info/userInfo" class="el-icon-edit  c-f"> 个人资料</router-link>
            </el-col>
            <el-col class="p-tb5">
              <span>余额 </span><span v-if="this.$store.getters.getValForKey('userAsset')!=null"  class="c-price">{{proUtil.Money(this.$store.getters.getValForKey('userAsset').balance)}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 20px;"></div>
    <div id="menuLeft" class="overflow-y">
      <el-menu v-if="data!=null&&data.length>0"
               router
               :default-openeds="menuInfo.vertical.keyPath"
               :default-active="menuInfo.vertical.key"
               :unique-opened="opened"
               :mode="nav_model"
               @open="handleOpen"
               @close="handleClose"
               @select="handleSelect"
               background-color="rgb(0,63,119)"
               text-color="#fff"
               active-text-color="#ffd04b"

      >
        <template v-for="(x,index) in menuInfo.menus" >
          <el-submenu   v-if="x.children.length>0" :index="x.id+''">
            <template slot="title">
              <span>{{x.name}}</span>
            </template>
            <template  v-for="(y,key) in x.children">
              <el-menu-item-group v-if="y.children.length>0">
                <template slot="title">
                  <span>{{y.name}}</span>
                </template>
                <el-menu-item v-for="(z,key2) in y.children" :key="z.id" :index="z.id" :route="z.path">
                  {{z.name}}
                </el-menu-item>
              </el-menu-item-group>
              <el-menu-item v-else :index="y.id" :route="y.path">
                {{y.name}}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item  v-else :index="x.path">
            {{x.name}}
          </el-menu-item>
        </template>
      </el-menu>
      <div v-else-if="data!=null&&data.length==0" style="text-align: center;margin-top:20%">
        <el-tag type="info">
          未配置管理菜单
        </el-tag>
      </div>
    </div>
  </div>
</template>
<script type="es6">
  import  menus from "@/router/url"
  export default {
    data() {
      return {
        loading:false,
        target:"slideMenu",
        opened: true,
        data:menus,
        slide_h:window.document.body.offsetHeight
      }
    },
    props: ['nav_model'],
    computed: {
      menuInfo() {
        return this.$store.state.menuInfo;
      }
    },
    methods: {
      refreshAsset(){
        this.loading=true;
        setTimeout(()=>{
          this.loading=false;
          this.$store.commit('init');
        },500)
      },
      init() {
        // this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllMenusTreeByAccount,"id":this.target,background:"rgba(50,64,87,1)","text":"加载菜单"});
        // this.proAPI.getJson(this.proAPI.URLS.getAllMenusTreeByAccount).then((res) => {
        this.$store.state.menuInfo.menus = this.data;
        // })
      },
      handleOpen(index, indexPath) {
        // console.log("菜单打开");
        // console.log(index);
        // console.log(indexPath);
      },
      handleClose(index, indexPath) {
        // console.log("菜单关闭");
        // console.log(index);
        // console.log(indexPath);
      },
      handleSelect(index, indexPath) {
        // console.log("选中");
        // console.log(index);
        // console.log(indexPath);
        this.$store.commit("modifyMenuInfoActiveVertical", {key: index, keyPath: indexPath});
      }
    },
    mounted() {
      this.init();
    }
  }
</script>
<style scoped lang="scss">
  #slideMenu{
    /deep/ .el-submenu__title:hover {
      outline: 0;
      background-color: rgba(64,158,255,0.4)!important;
    }
  }
  /**
    2.4.11出现了一条边线。。。还强制加了一个最小宽度为200px。我信了你的邪
   */
  .el-menu{
    border-right:none;
  }
  .el-submenu .el-menu-item {
    max-width: 100%;
    min-width: 160px;
  }
  #slideMenu>>>.el-submenu__title:hover{
    background-color: rgba(0,63,119,.7)!important;
    /*color:#ffd04b!important;*/
  }
  .el-menu-item:focus, .el-menu-item:hover {
    outline: none;
    background-color: rgba(0,63,119,.7)!important;
    color:#ffd04b!important;
  }

  #slideMenu>>>::-webkit-scrollbar
  {
    display: none!important;
  }
  #menuLeft{
    height:calc(100% - 193px);
  }
</style>
